<template>
  <div>
<h2>显示</h2>
<table class="table table-bordered">
  <div>
    <input type="button" value="导出数据" class="btn btn-danger">
    <input type="text" placeholder="请输入手机号" v-model="queryInfo.phone">
    <input type="button" value="查询" class="btn btn-primary"@click="Show()">
  </div>

  <tr>
    <th>联系方式</th>
   
    <th>姓名</th>
    <th>证件号码</th>
    <td>操作</td>
  </tr>
 
  <tr v-for="item in list">
    <td>{{ item.phone }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.card }}</td>
    <td>
      <input type="button" value="删除">
    </td>
  </tr>
</table>
  </div>
</template>

<script setup lang="ts">
import { reactive,toRefs,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router=useRouter()
let data=reactive({
  queryInfo:{
    phone:''
  },
  list:[]
})

let {queryInfo,list}=toRefs(data)
onMounted(()=>{
  Show()
})
function Show()
{
  let obj={
    phone:queryInfo.value.phone
  }
  axios({
    url:'/api/Member/GetMemberList',
    method:'get',
    params:obj
  })
  .then(res=>{
    list.value=res.data.data
  })
  .catch(err=>{

  })
}
</script>

<style scoped>

</style>